<template>
  <div>

    <div class="PayBookTitle" style="font-size: 16px;">
      <dl class="dl-lg">
        <dt>分类：</dt>
        <span @click="getSecCateId(null)"> <a :class="queryGoods.cateId==null?'active':''"
                                              href="javascript:void(0)">全部</a></span>
        <dd>
          <ul>
            <li v-for="(cateitem,index) in categoryList" :key="index">
              <el-dropdown @visible-change="showSecond(index)">
            <span class="el-dropdown-link" @click.prevent="getSecCateId(cateitem.id)">
              <a style="font-size: 16px;"
                 :class="queryGoods.cateId==cateitem.id||cateFatherId==cateitem.id||isMychild(cateitem.id,queryGoods.cateId)?'active':''"
                 href="javascript:void(0)"> {{ cateitem.name }}</a>
             <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(objItem,index) in cateSecond" :key="index">
                    <div style="font-size: 16px" @click.prevent="getSecCateId(objItem.id,true,objItem)">{{
                        objItem.name
                      }}
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
        </dd>
      </dl>
      <dl class="dl-lg">
        <dt>科目：</dt>
        <dd>
        <span @click="getObjId(null)">
           <a :class="queryGoods.subId==null?'active':''" href="javascript:void(0)">全部</a>
        </span>
          <ul>
            <li v-for="(item,index) in objectList" :key="index"><a href="javascript:void(0)"
                                                                   :class="queryGoods.subId==item.id?'active':''">
              <div @click.prevent="getObjId(item.id)">{{ item.name }}</div>
            </a></li>
          </ul>
        </dd>
      </dl>
      <ul class="tip">
        <li v-show="showTip"><a href="javascript:void(0);"
                                :class="queryGoods.sort=='recommend'||queryGoods.sort==''||queryGoods.sort==null?'active':''"
                                @click.prevent="getRecommend('recommend')"><i class="el-icon-s-flag">推荐</i></a></li>
        <li v-show="showTip"><a href="javascript:void(0);" :class="queryGoods.sort=='sale'?'active':''"
                                @click.prevent="getSales('sale')"><i class="el-icon-s-finance">销量</i></a>
        </li>
        <li v-show="showTip"><a href="javascript:void(0);" :class="queryGoods.sort=='price'?'active':''"
                                @click.prevent="priceTop('price')"><i class="el-icon-s-data">价格</i></a></li>
        <li v-show="showTip"><a href="javascript:void(0);" :class="queryGoods.sort=='new'?'active':''"
                                @click.prevent="priceTop('new')"><i class="icon iconfont icon-zuixinchanpin"> 最新</i></a>
        </li>
        <li v-show="showTip"><a href="javascript:void(0);" :class="queryGoods.order=='1'?'active':''"
                                @click.prevent="up(1)"><i class="el-icon-top">升序</i></a></li>
        <li v-show="showTip"><a href="javascript:void(0);" :class="queryGoods.order=='0'?'active':''"
                                @click.prevent="down(0)"><i class="el-icon-bottom">降序</i></a></li>
        <li>
          <el-input
              placeholder="请输入书籍名称或作者名称"
              v-model="queryGoods.keyword">
            <el-button slot="append" icon="el-icon-search" @click="submit" @keyup.enter="submit"></el-button>
          </el-input>
        </li>
      </ul>
    </div>


    <div class="layout">
      <ul class="shop-ul" style="overflow: hidden;width: 75em;">
        <BookItem v-for="(item,index) in bookList" :key="index" :book-info="item"></BookItem>
      </ul>
      <!--      分页控件-->
      <div class="block">
        <el-pagination
            align="center"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="queryGoods.pageNum"
            :page-size="queryGoods.pageSize"
            :page-sizes="[10,15,20]"
            :total="total">
        </el-pagination>
      </div>
    </div>


  </div>
</template>

<script>
import BookItem from "@/router/pages/PayBookList/BookItem";
// import PayBookTitle from "@/components/PayBookTitle";
export default {
  name: "PayBook",
  data() {
    return {
      bookList: [],
      currentPage: 1,
      total: 0,
      pageSize: 0,
      showTip: true,
      queryGoods: {
        keyword: null,
        cateId: null,
        subId: null,
        pageNum: 1,
        pageSize: 10,
        sort: null,  //
        order: 0,
      },
      categoryList: [],
      // objectList: ['语文', '数学', '英语', '历史', '生物', '地理', '物理', '化学', '道德与法治', '国学', '书法'],
      objectList: [],
      priceList: ['套装特价', '团购特价', '促销特价'],
      parentId: null,
      cateSecond: [],
      cateFatherId: null
    }
  },

  components: {
    // PayBookTitle,
    BookItem
  },
  methods: {
    handleSizeChange(val) {
      this.queryGoods.pageSize = val * 1
      this.$router.push({path: '/paybook', query: this.queryGoods})
    },
    handleCurrentChange(val) {
      this.queryGoods.pageNum = val;
      this.$router.push({path: '/paybook', query: this.queryGoods})
    },
    childByValue(newQuery) {
      const source = this.queryGoods
      this.queryGoods = {...source, ...newQuery}
      this.$router.push({path: '/paybook', query: this.queryGoods})

    },
    //menu start

    isMychild(fid, cid) {
      let target = false;
      let fobj = null
      this.categoryList.some(item => {
        if (item.id == fid) {
          fobj = item
          return true
        }
      })
      if (fobj != null) {
        fobj.children.forEach(item => {
          if (item.id == cid) {
            target = true;
          }

        })
      }
      return target;
    },
    priceTop(price) {
      this.queryGoods.sort = price
      this.submit()
    },
    getSales(sale) {
      this.queryGoods.sort = sale
      this.submit()
    },
    getRecommend(recommend) {
      this.queryGoods.sort = recommend
      this.submit()
    },
    up(orderId) {
      this.queryGoods.order = parseInt(orderId)
      this.submit()
    },
    down(orderId) {
      this.queryGoods.order = parseInt(orderId)
      this.submit()
    },

    getObjId(objId) {
      this.queryGoods.subId = objId
      this.submit()
    },
    submit() {
      //this.$emit('childByValue', this.queryGoods)
      this.getList()
    },
    getSecCateId(cateId, isSec, item) {
      if (isSec) {
        this.cateFatherId = item.parentId
        // console.log(item)
      } else {
        this.cateFatherId = null
      }

      this.queryGoods.cateId = cateId
      // console.log(objId,secCateId)
      let url = ''
      if (cateId != null) {
        url = '/p/pms/subject/cate/' + cateId
      } else {
        url = '/p/pms/subject/listAll'
      }
      this.getRequest(url).then((resp) => {
        this.objectList = resp.data
        const ids = this.objectList.map(i => i.id)
        // console.log(ids, this.queryGoods.subId)
        if (this.queryGoods.subId) {
          if (ids.indexOf(this.queryGoods.subId) === -1) {
            this.queryGoods.subId = null
          }
        }
      }).then(() => {
        this.submit()
      })


    },
    showSecond(index) {
      this.cateSecond = this.categoryList[index].children
    },
    itemClick(cateId) {
      console.log(cateId)
    },

    //menu end

    getList() {
      this.queryGoods.pageSize *= 1
      this.queryGoods.pageNum *= 1
      this.getRequest('/p/pms/book/customList', this.queryGoods).then((resp) => {
        this.bookList = resp.data.list
        this.total = resp.data.total
        this.queryGoods.pageSize = resp.data.pageSize
        this.queryGoods.pageNum = resp.data.pageNum

        // if(this.total==0){
        //
        // }
      })
    }
  },
  watch: {
    '$route'() {
      this.getList()
    }
  },
  created() {
    this.queryGoods = {...this.queryGoods, ...this.$route.query}
    // 获取顶级分类
    this.getRequest('/p/pms/bookCategory/listTree').then((resp) => {
      this.categoryList = resp.data
      this.parentId = resp.data.parentId
    })
    // 获取科目
    if (this.queryGoods.cateId != null) {

      this.getRequest('/p/pms/subject/cate/' + this.queryGoods.cateId).then((resp) => {
        this.objectList = resp.data
      })
    } else {
      this.getRequest('/p/pms/subject/listAll').then((resp) => {
        this.objectList = resp.data
      })
    }
    this.getList();
  }
}

</script>

<style scoped>

/*分页标题*/
.s-tui-jian {
  height: 40px;
  background: #f0f0f0;
  margin: 43px 0;
  overflow: hidden;
  line-height: 40px;
  font-family: "宋体";
}

.layout {
  width: 1152px;
  margin: 0 auto;
  height: 850px;
  /*border: solid;*/
}

.clearfix {
  display: block;
}

.tui-fl {
  overflow: hidden;
}

.fleft, .uleft li {
  float: left;
  display: inline;
}

.tui-fl ul li {
  float: left;
}

.tui-fl ul li a {
  border-left: 1px solid #e1e0e0;
  padding: 0 30px 0 8px;
}

.fright {
  float: right;
  display: inline;
}

.s-tui-jian {
  height: 40px;
  background: #f0f0f0;
  margin: 43px 0;
  overflow: hidden;
  line-height: 40px;
  font-family: "宋体";
}

.tip {
  /*width: 638px;*/
  height: 55px;
  overflow: hidden;
}

.tip li {
  float: left;
  margin-right: 1em;
  line-height: 40px;
}

.tip li:last-of-type {
  float: right;
}

.tip:after {
  clear: both;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-breadcrumb {
  font-size: 14px;
  line-height: 1;
  /* margin: 1em auto; */
  width: 100%;
}

.PayBookTitle .dl-lg {
  width: 71em;
  /* height: 50px; */
  height: 2em;
  border-bottom: lightgray solid 1px;
  margin: 1em auto;
}

.dl-lg dt {
  float: left;
}

dl dd {
  float: left;
}

dl dd ul {
  float: left;
}

dl span {
  float: left;
  margin: 0 2em;
}

dl dd ul li {
  float: left;
  margin-right: 3em;
}

dl dt {
  float: left;
}
</style>